<template>
  <div id="uploadCommonImg">
    <div
      v-for="(item, index) in uploadedImgList"
      :key="index"
      class="up-img-box"
    >
      <i class="el-icon-check"></i>
      <el-image
        fit="contain"
        style="width: 100%; height: 100%"
        :src="item.url"
        :preview-src-list="showBigList"
      />
    </div>
    <el-upload
      v-if="!hasUpImg"
      action="#"
      accept=".jpg,.png,.gif"
      drag
      list-type="picture-card"
      :show-file-list="false"
      :auto-upload="false"
      :on-change="changeUpload"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <div class="upload_tip">
      只能上传jpg/png/gif文件，且单个文件不超过10M
    </div>
    <div class="btn-box">
      <el-button
        v-if="!hasUpImg"
        size="small"
        type="success"
        :loading="loading"
        @click="submitUpload"
      >
        上传
      </el-button>
      <el-button v-if="hasUpImg" size="small" type="warning" @click="clearList">
        删除
      </el-button>
      <el-button
        plain=""
        style="margin-left: 10px;"
        size="small"
        type="warning"
        @click="closeUpImg"
      >
        关闭
      </el-button>
    </div>
  </div>
</template>

<script>
import { uploadImg } from '@/api/common/img'
export default {
  name: 'uploadCommonImg',
  msg: '上传图片公共组件',
  props: {
    dialogData: {
      type: Object,
      default: function() {
        return {
          isShow: true,
          url: ''
        }
      }
    }
  },
  data() {
    return {
      loading: false,
      imageUrl: '', //显示图片url
      fileRaw: null, //上传图片文件
      imgList: [],
      showBigList: [],
      uploadedImgList: []
    }
  },
  computed: {
    hasUpImg() {
      return this.uploadedImgList.length > 0
    }
  },
  watch: {},
  mounted() {},
  methods: {
    changeUpload: function(file, fileList) {
      let max = 10
      const isLtM = file.size / 1024 / 1024 < max

      if (!isLtM) {
        this.$message.error(`上传文件大小不能超过 ${max}MB!`)
        return
      }
      this.fileRaw = file.raw
      this.imageUrl = file.url
    },
    /* 上传图片 */
    submitUpload() {
      if (!this.fileRaw) {
        this.$message.error('请选择图片！')
        return
      }
      this.loading = true
      let formData = new FormData()
      formData.append('file', this.fileRaw)
      uploadImg(
        formData,
        (response) => {
          this.loading = false
          this.uploadedImgList.push(response[0])
          this.fileRaw = null
          this.imageUrl = ''
          this.showBigList.push(response[0].url)
          this.$emit('setImgInfo', this.uploadedImgList)
        },
        (response) => {
          this.loading = false
          this.$message.warning(response.message)
        }
      )
    },
    /* 删除 */
    clearList() {
      this.uploadedImgList = []
      this.$emit('setImgInfo', '')
    },
    /* 关闭上传图片组件*/
    closeUpImg() {
      this.dialogData.isShow = false
    }
  }
}
</script>

<style lang="less">
#uploadCommonImg {
  margin-bottom: 10px;
  img.avatar {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
  }
  .el-upload-dragger {
    width: 100%;
    height: 100%;
    border: 0;
  }
  .up-img-box {
    position: relative;
    float: left;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 148px !important;
    height: 148px !important;
    margin: 0 8px 8px 0;
    & > i {
      position: absolute;
      right: 0;
      top: 0;
      width: 26px;
      height: 22px;
      background: rgba(29, 200, 164, 0.8);
      z-index: 1;
      color: #fff;
      text-align: center;
      line-height: 22px;
      font-size: 12px;
    }
  }
  .el-img-box,
  .el-image {
    width: 148px !important;
    height: 148px !important;
  }
  .upload_tip {
    clear: both;
    color: #f00;
    font-size: 12px;
    padding: 10px 0;
  }
}
</style>
